<template>
  <el-container>
    <el-aside width="200px" class="aside-menu">
      <el-menu
      router
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <!-- 如果一级菜单拥有二级菜单 -->
        <el-submenu
          v-for="m in menu"
          :key="m.id"
          v-if="m.children != null"
          :index="m.router"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ m.permissionName }}</span>
          </template>
          <el-menu-item
            v-for="c in m.children"
            :key="c.id"
            :index="c.router"
          >
            {{ c.permissionName }}
          </el-menu-item>
        </el-submenu>

        <!-- 如果一级菜单没有二级菜单 -->
        <el-menu-item
          v-for="m in menu"
          v-if="m.children == null"
          :key="m.id"
          :index="m.router"
          @click="checkMenu(m.id)"
        >
          {{ m.permissionName }}
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <h1>欢迎来到管理后台</h1>
          <el-button type="danger" @click="logout">退出登录</el-button>
        </div>
      </el-header>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "AdminPage",
  data() {
    return {
      menu: [],  // 菜单数据
    };
  },
  methods: {
    checkMenu(val) {
      sessionStorage.setItem("menuId", val);  // 存储选中的菜单ID
    },
    resource() {
      const token = localStorage.getItem("token");
      this.$http.post('/tPermission/selectResource', {
        headers: {
          'token': token,
          'Content-Type': 'application/json',
        },
      })
      .then(resp => {
        console.log(resp);
        this.menu = resp.data.data;  // 处理响应数据
      })
      .catch(error => {
        console.error('错误:', error);
      });
    },
    logout() {
      // 清除登录状态，例如删除 token
      localStorage.removeItem("token");
      this.$message('已成功退出登录');  // 提示信息
      // 可以重定向到登录页
      this.$router.push('/login');
    },
  },
  created() {
    this.resource();  // 组件创建时调用获取菜单数据
  },
};
</script>

<style scoped>
.aside-menu {
  background-color: #f5f5f5;  /* 可以根据需要设置背景颜色 */
  border-right: 1px solid #e0e0e0;  /* 可以根据需要设置边框 */
}

.main-content {
  padding: 20px;  /* 主内容区域的内边距 */
}

/* 去除菜单项的下划线和更改颜色 */
.el-menu-item, .el-submenu__title {
  text-decoration: none; /* 去除下划线 */
  color: inherit; /* 继承父元素颜色 */
}

/* 如果需要自定义选中或hover状态颜色，可以在这里定义 */
.el-menu-item:hover {
  background-color: #e0e0e0; /* 自定义hover背景色 */
}
</style>
